<template>
  <div class="root">
    <div class="row row-ap">
      <span class="ap-name">{{ props.icao }}</span>
      <span
        class="ap-dir"
        :class="[
          props.runwayStatus.direction[props.icao] == 'S' ? 'ap-dir-s' : '',
        ]"
      >
        <el-icon
          :style="{
            transform: `scaleY(${
              props.runwayStatus.direction[props.icao] == 'S' ? -1 : 1
            })`,
          }"
          ><Promotion
        /></el-icon>
        <span style="margin-left: 4px">
          向{{
            props.runwayStatus.direction[props.icao] == "N" ? "北" : "南"
          }}</span
        ></span
      >
    </div>
    <div class="row row-rwy">
      <span
        class="rwy-tag rwy-tag-dep"
        type="success"
        v-for="item in props.runwayStatus.usages[props.icao].dep"
        size="small"
        >{{ item }}</span
      >
      <!-- <el-divider direction="vertical" /> -->
      <span
        class="rwy-tag rwy-tag-arr"
        type="warning"
        v-for="item in props.runwayStatus.usages[props.icao].arr"
        size="small"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  icao: {
    type: String,
    required: true,
  },
  runwayStatus: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
.root {
  width: 160px;
  max-width: 160px;
  padding: 2px 6px;
  margin: 0;
  border-bottom: 1px solid #888;
}

.root:last-child {
  border-bottom: none;
}

.row {
  padding: 2px 0;
}

.row-ap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  padding: 0 6px;
}

.row-rwy {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  /* padding-bottom: 4px; */
}

.ap-name {
  font-size: 16px;
  font-weight: bolder;
  font-family: "Consolas", "Courier New", Courier, monospace;
}

.ap-dir {
  padding: 0;
  display: flex;
  align-items: center;
}

.ap-dir-s {
  font-weight: bolder;
  color: var(--el-color-warning);
}

.rwy-tag {
  /* height: 16px; */
  /* width: 48px;
  min-width: 48px;
  max-width: 48px;
  overflow: hidden; */
  font-size: 16px;
  font-weight: bolder;
  font-family: "Consolas", "Courier New", Courier, monospace;
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 1px 6px #00000088;
  padding: 0px 6px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.rwy-tag:last-child {
  margin-right: 0;
}

.rwy-tag-dep {
  background-color: #4c9;
}
.rwy-tag-arr {
  background-color: #d94;
}
</style>
